<template>
  <view class="box">
    <view class="item" v-for="(item, index) in list" :key="index">
      <!-- <i class="icon el-icon-s-order" style="background: rgb(129, 157, 205)"></i> -->
      <i :class="'icon ' + item.icon" :style="{ background: item.color }"></i>
      <view class="right">
        <view class="tit">
          <text style="margin-right: 4px">{{ item.title }}</text>
          <el-tooltip
            :content="item.content"
            placement="right-end"
            effect="dark"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </view>
        <animate-number
          ref="now"
          class="money"
          :from="0"
          :to="item.value"
          duration="1000"
          easing="easeOutQuad"
          :formatter="formatter"
          :key="item.value"
        >
        </animate-number>
        <text :class="per(item.value, item.value2) >= 0 ? 'roll2' : 'roll'"
          >{{ per(item.value, item.value2) }}%
          <i
            class="el-icon-caret-bottom"
            style="color: #67c23a"
            v-if="per(item.value, item.value2) < 0"
          ></i>
          <i
            class="el-icon-caret-top"
            style="color: #ed4014"
            v-if="per(item.value, item.value2) >= 0"
          ></i
        ></text>
      </view>
    </view>
  </view>
</template>

<script>
var vk = uni.vk;
export default {
  data() {
    return {
      all_area: 0,
      now_area: 0,
      all_order: 0,
      now_order: 0,
      all_pay: 0,
      now_pay: 0,
      all_time: 0,
      now_time: 0,
      all_way: 0,
      now_way: 0,
      all_back: 0,
      now_back: 0,
      list: [
        {
          icon: "vk-icon-goodsfill",
          color: "#1890ff",
          title: "商品浏览量",
          content:
            "在选定条件下，所有商品详情页被访问的次数，一个人在统计时间内访问多次记为多次",
          value: 0,
          value2: 0,
        },
        {
          icon: "el-icon-s-shop",
          color: "#00c050",
          title: "商品访客数",
          content:
            "在选定条件下，访问任何商品详情页的人数，一个人在统计时间范围内访问多次只记为一个",
          value: 0,
          value2: 0,
        },
        //加购件数
        {
          icon: "vk-icon-cart_fill_light",
          color: "#ffab2b",
          title: "加购件数",
          content: "在选定条件下，在选定条件下，添加商品进入购物车的商品件数",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-order",
          color: "#b37feb",
          title: "下单件数",
          content:
            "在选定条件下，成功下单的商品件数之和（线下支付订单在后台确认支付后计入，不剔除退款订单）",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-pay",
          color: "#1890ff",
          title: "支付件数",
          content:
            "在选定条件下，成功付款订单的商品件数之和（线下支付订单在后台确认支付后计入，不剔除退款订单））",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-moneybagfill",
          color: "#00c050",
          title: "支付金额",
          content:
            "在选定条件下，成功付款订单的商品金额之和（线下支付订单在后台确认支付后计入，不剔除退款订单）",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-moneybag",
          color: "#ffab2b",
          title: "成本金额",
          content: "在选定条件下，成功付款订单的商品成本金额之和",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-return",
          color: "#b37feb",
          title: "退款金额",
          content:
            "在选定条件下，成功下单的商品件数之和（线下支付订单在后台确认支付后计入，不剔除退款订单）",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-goods_new_fill_light",
          color: "#1890ff",
          title: "退款件数",
          content: "在选定条件下，成功退款的商品件数之和",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-moneybagfill",
          color: "#00c050",
          title: "访客-支付转化率",
          content: "在选定条件下， 付款人数 / 访客数",
          value: 0,
          value2: 0,
        },
      ],
    };
  },
  methods: {
    formatter: function (num) {
      //判断num是否是小数
      if (num % 1 === 0) {
        //不是小数
        return num;
      }
      //是小数
      return num.toFixed(2);
    },
    per(a, b) {
      if (a == 0 && b == 0) return 0;
      if (a == 0) return -100;
      if (b == 0) return 100;
      return (((a - b) / b) * 100).toFixed(2);
    },
    async init(time) {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.detailGoodView",
        data: { time },
      });
      this.list = res.list;
      this.$emit("comp");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 20px 16px 0 16px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  width: 20%;
  margin-bottom: 24px;
  .icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .right {
    display: flex;
    margin-left: 14px;
    flex-direction: column;
    font-size: 14px;
    color: #666;
    .money {
      color: #333;
      font-size: 30px;
    }
    .roll {
      font-style: italic;
      font-size: 12px;
      color: #67c23a;
    }
    .roll2 {
      font-style: italic;
      font-size: 12px;
      color: #ed4014;
    }
    .roll::before {
      content: "环比减少：";
      font-style: normal;
      font-size: 14px;
      color: #666;
    }
    .roll2::before {
      content: "环比增长：";
      font-style: normal;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
